<template>
  <div>
    <el-card shadow="never" class="mainCard" v-loading="loading">
      <div style="width: 100%; height: 40px;">
        <el-button type="warning" size="small" link style="float: right; margin-left: 10px;"  @click="reback()">返 回</el-button>
        <el-button type="primary" size="small" link style="float: right; margin-left: 10px;" @click="save()">保 存</el-button>
      </div>

      <div style="width: 100%; margin-top: 10px;" class="mainDiv">
        <div style="width: 49%; float: left;" v-if="formData.reAuth">
          <p>登录页面模板</p>
          <codemirror id="codemirrorDiv" ref="codemirrorEdit" v-model="loginTemplateContent" :options="cmOptions" />
        </div>
        <div style="width: 49%; float: left; height: 100%; margin-left: 1%;">
          <p>访问首页模板</p>
          <codemirror id="codemirrorDiv2" ref="codemirrorEdit2" v-model="indexTemplateContent" :options="cmOptions" />
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import applicationApi from '@/api/system/application'
import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';

import 'codemirror/mode/javascript/javascript.js';
import "codemirror/mode/markdown/markdown.js";
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/vue/vue.js';
import './setting.js';
export default {
  name: 'applicationTemplateDesign',
  props: {
		checkedApp: {
			type: Object,
			default: {},
		},
	},
  data() {
    return {
      loading: false,
      loginTemplateContent: '',
      indexTemplateContent: '',
      cmOptions: {
				tabSize: 2, // tab
				styleActiveLine: true,
				lineNumbers: true, // 换行操作
				lineWrapping: true, // 换行操作
				styleSelectedText: true,
				line: true,
				foldGutter: true,
				gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
				highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
				mode: 'text/html',
				hintOptions: {
					completeSingle: false,
				},
				keyMap: 'sublime',
				matchBrackets: true,
				showCursorWhenSelecting: true,
				theme: 'monokai',
				// theme: 'solarized',
				extraKeys: {},
			},

      formData: {},
      
    }
  },
	mounted() {
		this.init();
	},
  methods: {
    save () {
      let formData = this.formData;
      formData.loginTemplateContent = this.loginTemplateContent;
      formData.indexTemplateContent = this.indexTemplateContent;
      applicationApi.update(formData).then(res => {
        this.$message({message: '应用模板编辑成功！', type: 'success'});
      })
    },
    init () {
      //this.appResourceContent = this.checkedAppResource.content ? this.checkedAppResource.content : '';
      applicationApi.get(this.checkedApp.id).then((res) => {
        let data = res.data;
        this.formData = data;
        this.loginTemplateContent = data.loginTemplateContent;
        this.indexTemplateContent = data.indexTemplateContent;
      });
    },
    reback () {
      this.$emit("close");
    },
  }
}
</script>

<style scoped>

/deep/.CodeMirror {
	/* height: 560px !important; */
	height: calc(100vh - 240px);
}
.mainDiv {
  height: calc(100vh - 240px);
}
</style>
